<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%=request.$.title%></title>
    <script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
    <style>
    pre.code{background: #d2d2d2;padding: 4px;}
    </style>
</head>
<body>
<a href="../index.html">返回首页</a>
<style>
    .select-holder{
        display: inline-block;
        overflow: hidden;
        height: 24px;
        line-height: 24px;
    }
    .select-holder.expended{
        height: auto;
    }
    .select-holder span{
        display: block;
    }
</style>
<h2>一个模拟下拉框【使用requirejs加载】</h2>
<select name="favi" id="favi">
    <option value="">--请选择--</option>
    <option value="1" selected>篮球</option>
    <option value="2">足球</option>
    <option value="3">排球</option>
</select>
<button id="exec">模拟</button>

<script class="code">
require(['../wfQuery'],function($){
    $.fn.Select = function(){
        return this.each(function(){
            var select = this, index = select.children[select.selectedIndex];
            var sel = $( '<a class="select-holder">'+'<strong>'+index.innerHTML+'</strong>' + select.innerHTML.replace(/(\<[\/]?)option/ig,'$1span')+'</a>' );
            $(select).before(sel).hide();
            $(document).on('click','.select-holder',function(e){
                $(this).toggleClass( 'expended' );
                var tar = $(e.target), show = $(this).children('strong');
                    value = tar.attr('value'), 
                    _sel = $(this).next();
                if( value ){
                    _sel.val( value );
                    show.html( tar.html() )
                }
            },function(e){
                $('.select-holder').removeClass( 'expended' );
            });
        });
    };
    var selected = false;
    $('#exec').on('click',function(){
        if( selected ){
            $('#favi, .select-holder').toggle();
        }else{
            selected = !selected;
            $('#favi').Select();
        }
        $(this).html( $(this).html() === "模拟" ? '重置' : "模拟" ); 
    });
});
</script>
<a href="https://github.com/shy2850/wfQuery.git" target="_"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
</body>
</html>
<%
    var pre = require('../plugins/prettify.js');
    __p = __p.replace(/\<script\s+class="code".*\>([\s\S]*?)\<\/script\>/,function(all,code){
        var res = pre.parse(code);
        return '<style>'+res.style+'</style>' + '<pre class="code">' + res.output + '</pre>' + all;
    });
%>
